import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';
import ReactNative, {
  EdgeInsetsPropType,
  Image,
  NativeMethodsMixin,
  Platform,
  requireNativeComponent,
  StyleSheet,
  View,
  UIManager
} from 'react-native';

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
// const flattenStyle = require('flattenStyle');
// const flattenStyle = StyleSheet.flatten;
import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle'

export default class AutoRotateImageView extends Component {

  static defaultProps = {
    enableAutoRotate: true,
  };  // 注

  static propTypes = {
    ...Image.propTypes,

    /**
     * 是否自适应(旋转)纠正图片方向
     */
    enableAutoRotate: PropTypes.bool,
  }

  constructor(props) {
    super(props);
  }

  render() {
    const source = resolveAssetSource(this.props.source) || { uri: undefined, width: undefined, height: undefined };

    let sources;
    let style;
    if (Array.isArray(source)) {
      style = flattenStyle([styles.base, this.props.style]) || {};
      sources = source;
    } else {
      const {width, height, uri} = source;
      style = flattenStyle([{width, height}, styles.base, this.props.style]) || {};
      sources = [source];

      if (uri === '') {
        console.warn('source.uri should not be an empty string');
      }
    }

    const resizeMode = this.props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108
    const tintColor = (style || {}).tintColor; // Workaround for flow bug t7737108

    if (this.props.src) {
      console.warn('The <AutoRotateImageView> component requires a `source` property rather than `src`.');
    }
    return (
      <AutoRotateImageViewNative
        {...this.props}
        style={style}
        resizeMode={resizeMode}
        tintColor={tintColor}
        source={sources}
      />
    );
  }
}

var AutoRotateImageViewNative = requireNativeComponent('AutoRotateImageView', AutoRotateImageView);

const styles = StyleSheet.create({
  base: {
    overflow: 'hidden',
  },
});
